window.onload = function () {
    const bannerTimeId = setTimeout(() => {
        // 用于后续动画及按钮的序号
        let index = 1;
        // 动画开关（节流）
        let isMove = false;
        // 定义轮播图初始位置
        $('.imgBox').css({
            left: -$('.imgBox li').first().width() * index,
            width: ($('.imgBox li').length + 2) * $('.imgBox li').first().width()
        });
        // 复制首位用于切换
        const last = $('.imgBox li').first().clone(true);
        const first = $('.imgBox li').last().clone(true);
        $('.imgBox').append(last).prepend(first);
        // 需要添加功能，离开页面停止自动播放document.onvisibilitychange(document.visibilityState === "visible/hidden") 
        // 通过isMove节流工具控制autoPlay函数的运行
        document.onvisibilitychange = function () {
            if (document.visibilityState === "hidden") {
                // console.log("visibilityState === 'hidden'");
                isMove = true;
            }
            if (document.visibilityState === "visible") {
                // console.log("visibilityState === 'visible'");
                isMove = false;
            }
        }

        // 自动播放
        function autoPlay() {
            let autoTimerId = setInterval(function () {
                if (isMove) {
                    return;
                }
                index++;
                $('.imgBox').animate({
                    left: -$('.imgBox li').first().width() * index
                }, 3000, 'linear', moveEnd)

            }, 6000)
            // 设置规则，鼠标进入则停止自动（有冒泡）
            $('.banner').mouseover(function () {
                $(this).find('p').show();
                clearInterval(autoTimerId);
            })
            $('.banner').mouseout(function () {
                $(this).find('p').hide();
                autoTimerId = setInterval(function () {
                    if (isMove) {
                        return;
                    }
                    index++;
                    $('.imgBox').animate({
                        left: -$('.imgBox li').first().width() * index
                    }, 3000, 'linear', moveEnd)

                }, 6000)

            })
        }
        autoPlay()

        // 右滑按钮
        $('.rightTabs').on('click', function () {
            if (isMove) {
                return;
            }
            index++;
            isMove = true;
            $('.imgBox').animate({
                left: -$('.imgBox li').first().width() * index
            }, 3000, 'linear', moveEnd)


        })
        // 左滑按钮
        $('.leftTabs').on('click', function () {
            if (isMove) {
                return;
            }
            index--;
            isMove = true;
            $('.imgBox').animate({
                    left: -$('.imgBox li').first().width() * index
                },
                3000, 'linear', moveEnd);

        })

        // 新增点击按钮（因为先复制了俩张图，故此处要减2）
        for (let i = 0; i < $('.imgBox li').length - 2; i++) {
            $("<li></li>").css({
                margin: 10
            }).appendTo($(".pointBox"));
        }
        $(".pointBox li").first().addClass('active');
        $(".pointBox li").on("click", function () {
            index = $(this).index() + 1;

            $('.imgBox').animate({
                    left: -$('.imgBox li').first().width() * (index)
                },
                3000, 'linear', moveEnd);
        })
        // 动画完的回调函数（倒数第二张与第二张的切换，点击按钮的高亮）
        function moveEnd() {
            if (index === 0) {
                index = $('.imgBox li').length - 2;
                $('.imgBox').stop().css({
                    left: -$('.imgBox li').first().width() * index
                });
            }
            if (index === $('.imgBox li').length - 1) {
                index = 1;
                $('.imgBox').stop().css({
                    left: -$('.imgBox li').first().width() * index
                });
            }
            // eq（index-1）是因为imgBox是从index=1开始算起（前后有俩复制品），而pointBox是从index=0开始
            $(".pointBox li").eq(index - 1).addClass('active').siblings().removeClass('active');
            isMove = false;
        }

    }, 500) // 用于后续动画及按钮的序号
}